<template>
  <div class="body">
    <Header @getSchemeId="getSchemeId"></Header>
    <audio></audio>
    <div class="BreadcrumbSortBox">
      <!-- 面包屑 -->
      <div class="flex center">
        <!-- <a-breadcrumb>
          <a-breadcrumb-item>一级分类</a-breadcrumb-item>
          <a-breadcrumb-item>二级分类</a-breadcrumb-item>
          <a-breadcrumb-item></a-breadcrumb-item>
        </a-breadcrumb>-->
      </div>
    </div>
    <div>
      <div class="w flex product-intro clearfix">
        <!-- <ProductPreview></ProductPreview> -->

        <JdProductPreview :imageArr="imageArr"></JdProductPreview>
        <div class="itemInfo-wrap">
          <div class="sku-name">{{ schemeInfo.SubAppsSolutions }}</div>
          <div class="summary-price-wrap">
            <div class="summary-price J-summary-price">
              <div class="dt">Price</div>
              <div class="dd">
                <span class="p-price">
                  <!-- <span>$</span> -->
                  <span class="price J-p-69130990642">{{ schemeInfo.CostofInvestment }}</span>
                </span>
              </div>
            </div>
            <!-- 
            <div class="summary-info J-summary-info clearfix">
              <div class="comment-count item fl">
                <p class="comment">Customer Reviews</p>
                <a class="count J-comm-67464971466">30+</a>
              </div>
            </div>-->
          </div>
          <div class="li p-choose">
            <div class="dt">
              <span>JabilCome</span>
            </div>
            <div class="dd">
              <img src="../../assets/img/List/coin.png" alt class="coinImg" />
              <span class="jpb">{{ schemeInfo.JPB }}</span>
            </div>
          </div>
          <div class="li p-choose">
            <div class="dt">Benefit</div>
            <div class="dd">{{ schemeInfo.BenefitComments }}</div>
          </div>
          <div class="li p-choose">
            <div class="dt">Department</div>
            <div class="dd">{{ schemeInfo.Department }}</div>
          </div>
          <div class="li p-choose">
            <div class="dt">Due Date</div>
            <div class="dd">{{ schemeInfo.DueDate }}</div>
          </div>
          <div class="li p-choose">
            <div class="dt">Project Leader</div>
            <div class="dd">{{ schemeInfo.Projectleader }}</div>
          </div>

          <div class="li p-choose">
            <a-icon
              type="like"
              theme="outlined"
              style="font-size: 36px;color: rgb(255, 106, 0);margin-left: 9px;cursor: pointer;"
              @click="giveLike"
              v-if="schemeInfo.IsPraise"
            />
            <a-icon
              type="like"
              theme="outlined"
              style="font-size: 36px;margin-left: 9px;cursor: pointer;"
              @click="giveLike"
              v-else
            />

            <div class="dd jpb">{{ schemeInfo.PraiseTimes }}</div>
          </div>
          <div class="btn-lg" @click="CreatePDF">Export</div>
        </div>
        <div id="track" class="track">
          <div class="extra">
            <div class="track-tit">
              <!-- <h3>看了又看</h3> -->
              <h3>Looked and looked</h3>
              <span></span>
            </div>
            <div class="track-con">
              <ul
                class="trackUl"
                v-if=" schemeInfo.shpSchemeRecommend&&schemeInfo.shpSchemeRecommend.length>0"
                :style="{'top':trackULTop+'px','height':schemeInfo.shpSchemeRecommend.length*188+'px'}"
              >
                <li
                  v-for="(item, index) in schemeInfo.shpSchemeRecommend"
                  :key="index"
                  @click="toSchemePage(item)"
                >
                  <a>
                    <img height="150" width="150" :src="item.SchemeImage[0]" @error="errorImg" />
                    <div>{{ item.SubAppsSolutions }}</div>
                    <p class="J-p-100011535072">{{ item.CostofInvestment }}</p>
                  </a>
                </li>
              </ul>
            </div>
            <div class="track-more">
              <a class="J-prev sprite-up" @click="upTit">上翻</a>
              <a class="J-next sprite-down" @click="downTit">下翻</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 推荐模块 -->
      <div class="w">
        <div id="shopRecSuit" class="ETab">
          <div class="tab-main large">
            <ul>
              <li class="J-shopRec-trigger shopRec-trigger current">SME Recommend</li>
            </ul>
          </div>
          <div class="tab-con clearfix">
            <div class="J-shopRec-content shopRec-content">
              <ul class="plist plist-2" id="shop-reco">
                <li
                  class="fore1"
                  v-for="(item, index) in schemeInfo.shpSchemeSME"
                  :key="index"
                  @click="toSchemePage(item)"
                >
                  <div class="p-img">
                    <img
                      width="160"
                      height="160"
                      v-if="item.SchemeImage[index]"
                      :src="item.SchemeImage[index]"
                      @error="errorImg"
                    />
                    <img width="160" height="160" v-else src="@/assets/img/noImg.png" />
                  </div>
                  <div class="p-name">
                    <a>{{ item.SubAppsSolutions }}</a>
                  </div>
                  <div class="p-price">
                    <strong class="J-p-100007384530">{{ item.CostofInvestment }}</strong>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- tab 规格及评价 -->
        <div class="Detail">
          <div class="tab-main large" :class="fixTop?'Topfixed':''">
            <ul>
              <li
                v-for="(item, index) in tabList"
                :key="index"
                :class="index==activeIndex?'current':''"
                @click="tabClick(index)"
              >{{ item }}</li>
              <li class="current a0" @click="CreatePDF">Export</li>
            </ul>
          </div>

          <div v-if="activeIndex===0">
            <div class="p-parameter">
              <p class="p50" v-text="schemeInfo.Description" style="font-size: 18px;"></p>

              <p class="more-par">
                <a class="J-more-param" @click="()=>activeIndex=1">
                  More Parameters
                  <span class="txt-arr">>></span>
                </a>
              </p>
            </div>
            <div class="content p50" v-html="schemeInfo.Details"></div>
          </div>
          <!-- 规格参数 -->
          <div v-show="activeIndex===1">
            <div
              class="container"
              v-if="schemeInfo.shpSchemeKind&& schemeInfo.shpSchemeKind.length>0"
            >
              <div class="section">
                <div class="section-content">
                  <!--  list 修改区域 -->
                  <div v-for="(table, i) in schemeInfo.shpSchemeKind" :key="i">
                    <label class="section-title">{{ table.KindName }}</label>
                    <!-- <a-list bordered :data-source="table.shpSchemeDetailed" class="DList"> -->

                    <div bordered class="DList">
                      <div slot="header">
                        <div class="header">
                          <a-checkbox
                            @change="checkAll(table,i)"
                            :checked="table.check"
                            class="checkBox"
                          ></a-checkbox>
                          <span>ProductName</span>
                          <span>ProductParameter</span>
                          <span>Quantity</span>
                          <span>Unit</span>
                          <span>Imgs</span>
                          <span>Price</span>
                        </div>
                      </div>
                      <a-list-item
                        slot="renderItem"
                        v-for="(item, index) in table.shpSchemeDetailed"
                        :key="index"
                      >
                        <div class="line">
                          <a-checkbox
                            @change="checkLine(item,i,index)"
                            class="checkBox"
                            :checked="item.check"
                          ></a-checkbox>
                          <span>{{ item.ProductName }}</span>
                          <span>{{ item.ProductParameter }}</span>
                          <span>
                            <a-input-number
                              v-model="item.Quantity"
                              :min="0"
                              :max="10000"
                              @change="onChangeQuantity(item,i)"
                            />
                          </span>
                          <span>{{ item.Unit }}</span>
                          <span>
                            <viewer style="width: 150px;height: 150px; overflow: hidden;">
                              <img
                                v-if="item.ImageUrl"
                                :src="item.ImageUrl"
                                style="width:150px;height:150px;"
                                @error="errorImg"
                              />
                              <img
                                style="width:150px;height:150px;"
                                v-else
                                src="@/assets/img/noImg.png"
                              />
                            </viewer>
                          </span>
                          <span>{{ item.Price }}</span>
                        </div>
                      </a-list-item>
                    </div>
                    <!-- 小计区域 -->
                    <div class="totalPrice sub_total">
                      <div class="price-item">
                        <div class="price-name">
                          <span>subTotal：</span>
                          <span class="price-trade">
                            <span class="ng-star-inserted">
                              <span class="price-cny-symbol">$</span>
                              <span class="price-money">{{ sub_totalList[Number(i)] }}</span>
                              <span class="price-cny-unit"></span>
                              <span class="price-count-unit"></span>
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="totalPrice sub_total">
                <div class="price-item">
                  <div class="price-name">
                    <span>Total：</span>
                    <span class="price-trade">
                      <span class="ng-star-inserted">
                        <span class="price-cny-symbol">$</span>
                        <span class="price-money">{{ totalAmount }}</span>
                        <span class="price-cny-unit"></span>
                        <span class="price-count-unit"></span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 商品评价 -->
          <div v-if="activeIndex===2">
            <div class="mt">
              <h3>Scheme Evaluation</h3>
              <div class="AddComment" @click="openAddCommentsModal">Add comments</div>
            </div>
            <div class="tab-main small shopdt1">
              <ul class="filter-list" v-if="userReviewsInfo">
                <li :class="reviewsIndex===0?'current':''" @click="changeReviews(0)">
                  <a>
                    All
                    <span>({{ userReviewsInfo.AllEvaluation?userReviewsInfo.AllEvaluation:0 }}+)</span>
                  </a>
                </li>
                <li :class="reviewsIndex===1?'current':''" @click="changeReviews(1)">
                  <a>
                    Pictured
                    <span>({{ userReviewsInfo.Pictured }}+)</span>
                  </a>
                </li>
                <li :class="reviewsIndex===2?'current':''" @click="changeReviews(2)">
                  <a>
                    Video
                    <span>({{ userReviewsInfo.Video }}+)</span>
                  </a>
                </li>
                <!-- <li class="ar">
                  <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                      Recommend Sorting
                      <a-icon type="down" />
                    </a>
                    <a-menu slot="overlay" @click="RecommendSorting">
                      <a-menu-item key="1">Recommend sorting</a-menu-item>
                      <a-menu-item key="2">Time Sorting</a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </li>-->
              </ul>
            </div>
            <!-- 评价内容列表 -->

            <div
              class="tab-con"
              v-if="userReviewsInfo.shpSchemeReplyInfo &&userReviewsInfo.shpSchemeReplyInfo.length>0"
            >
              <div
                v-for="(item, index) in userReviewsInfo.shpSchemeReplyInfo"
                :key="index"
                class="comment-item"
              >
                <div class="user-column">
                  <div class="user-info">
                    <!-- <img src="width=&quot;25&quot;" height="25" class="avatar" @error="errorImg" /> -->
                    <a-avatar shape="square" icon="user" />
                    {{ item.UserName }}
                  </div>
                  <div class="user-level">
                    <a class="comment-plus-icon" target="_blank"></a>
                  </div>
                </div>
                <div class="comment-column J-comment-column">
                  <a-rate :default-value="item.Satisfaction" disabled class="star" />

                  <p class="comment-con">{{ item.Comments }}</p>
                  <div class="pic-list J-pic-list" v-if="item.Images.length>0">
                    <!-- <a class="J-thumb-img current"> -->
                    <div
                      class="J-thumb-img"
                      v-for="(v, i) in item.Images"
                      :key="i"
                      @click="shopImgPreview($event,v,i,index,item.Images,item)"
                      :class="item.activeIndex===i?'active':''"
                    >
                      <img :src="v" width="48" height="48" @error="errorImg" />
                      <span class="video-icon"></span>
                    </div>
                  </div>

                  <img
                    v-show="item.isShowImg"
                    :src="item.selectUrl"
                    @error="errorImg"
                    class="fatshowImg"
                    @click="()=>item.isShowImg=false"
                  />
                  <div class="J-video-view-wrap clearfix" style="display: block;"></div>
                  <div class="comment-message">
                    <div class="order-info">
                      <!-- <span>遮瑕双头美颜笔</span> -->
                      <span></span>
                      <span></span>
                      <span>{{ item.CreateTime }}</span>
                    </div>
                    <!-- <div class="comment-op">
                      <a class="J-nice">
                        <i class="sprite-praise"></i>17
                      </a>
                      <p>
                        <i class="sprite-comment"></i>
                      </p>
                    </div>-->
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <a-pagination
              v-model="commentPage"
              show-size-changer
              show-quick-jumper
              :page-size.sync="commentPageSize"
              :total="commentCount"
              @showSizeChange="changePage"
              @change="changePage"
              class="pagination"
            />
          </div>
        </div>
      </div>
    </div>

    <!--  添加评论弹框 -->
    <a-modal
      v-model="modalVisiable"
      @ok="handleOk"
      :maskClosable="false"
      :title="ModalTitle"
      :destroyOnClose="true"
    >
      <div>
        <a-form class="mc0" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="Comments">
            <a-textarea
              placeholder
              v-model="Comments"
              allowClear
              class="textArea"
              :auto-size="{ minRows: 8, maxRows: 18 }"
              style="width:350px;"
            ></a-textarea>
          </a-form-item>
          <a-form-item label="Satisfaction">
            <a-rate v-model="Satisfaction" />
          </a-form-item>
          <a-form-item label="Images">
            <imgUpload @uploadFileList="getImgFile" :imageArr="Images" :doType="doType"></imgUpload>
          </a-form-item>
          <a-form-item label="Video">
            <videoUpload
              @uploadFileList="getVideoList"
              :videoUrl="Video"
              :limit="1"
              :doType="doType"
            ></videoUpload>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal
      v-model="pdfModalVisable"
      @ok="toCreatePdf"
      :maskClosable="false"
      :title="ModalTitle"
      @cancel="cancelCreatePdf"
      :keyboard="pdfModalVisable"
      :closable="pdfModalVisable"
    >
      <div class="exportBox">
        <a-checkbox v-model="isSummary" disabled>Summary</a-checkbox>
        <a-checkbox v-model="isParameter" disabled>Parameter</a-checkbox>
        <a-checkbox v-model="isDetail">Detail</a-checkbox>
      </div>
    </a-modal>
  </div>
</template>

<script>
import imgUpload from '@/components/upload/imgUpload'
import Header from '@/components/layout/header'
import JdProductPreview from '@/components/ProductPreview/previewTest'
import videoUpload from '@/components/upload/videoUpload'

export default {
  name: 'Scheme',
  data() {
    return {
      // tabList: ['方案介绍', '规格与参数', '方案评价'],
      tabList: [
        'Scheme Introduction',
        'Specifications Parameters',
        'Scheme Evaluation',
      ],
      activeIndex: 0,
      AllEvaluation: [], //所有评价
      imageEvaluation: [], //有图评价
      videoEvaluation: [], //视频评价
      AllEvaluationNum: 0,
      imageEvaluationNum: 0,
      videoEvaluationNum: 0,
      schemeDetailInfo: [],
      imageArr: [],
      trackULTop: 0,
      tellImgList: [],
      parameterData: [],
      columns: [],
      fixTop: false,
      browsingHistory: [],
      theSchemeId: '',
      schemeInfo: [],
      DetailedInformation: '',
      Summary: '',
      RecommendInfo: [],
      sub_total: 0,
      totalAmount: 0,
      QueType: '',
      userReviewsInfo: {},
      reviewsIndex: 0,
      SchemeId: '',
      commentPage: 1,
      commentPageSize: 10,
      commentCount: 0,
      UserInfo: {},
      selectedRows: [],
      modalVisiable: false,
      ModalTitle: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 12 },
      },
      Comments: '',
      Satisfaction: 0,
      Images: [],
      Video: '',
      doType: '',
      pdfModalVisable: false,
      isSummary: true,
      isParameter: true,
      isDetail: false,
      fileUrl: '',
      isTimeOut: false,
      isToDo: false, //是否请求pdf
      SelectedKindList: [],
      sub_totalList: [],
    }
  },
  components: {
    Header,
    JdProductPreview,
    imgUpload,
    videoUpload,
  },
  created() {
    // for (let index = 0; index < 6; index++) {
    //   this.tellImgList.push({
    //     activeIndex: 0,
    //     isShowImg: false,
    //     img: ''
    //   })
    // }
    // this.geHistory()
  },
  mounted() {
    const a = JSON.parse(this.$route.query.item)
    this.theSchemeId = a.SchemeId
    this.SchemeId = a.SchemeId
    console.log('this.theSchemeId :>> ', this.theSchemeId)

    document.addEventListener('scroll', this.handleScrollx, true) //监听 scroll
    // this.mock()
    this.$nextTick(() => {
      this.getSchemeDetail()
    })
    this.getCommentList()
    this.UserInfo = JSON.parse(sessionStorage.getItem('userInfo'))[0]
    console.log(this.UserInfo)
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this.handleScrollx, true)
  },
  watch: {
    $route() {
      const a = JSON.parse(this.$route.query.item)
      this.schemeDetailInfo = a
      this.theSchemeId = a.SchemeId
      this.SchemeId = a.SchemeId
      this.getSchemeDetail()
    },
  },
  methods: {
    makeKindIdList() {
      const that = this
      this.KindIdList = []
      if (
        this.schemeInfo.shpSchemeKind &&
        this.schemeInfo.shpSchemeKind.length > 0
      ) {
        this.schemeInfo.shpSchemeKind.map((item) => {
          if (item.shpSchemeDetailed && item.shpSchemeDetailed.length > 0) {
            let obj = {}
            obj.ProductNameList = []
            item.shpSchemeDetailed.map((v) => {
              if (v.check) {
                obj.KindId = v.KindId
                obj.ProductNameList.push(v.ProductName)
                obj.ProductNameList = Array.from(new Set(obj.ProductNameList))
              }
            })
            that.KindIdList.push(obj)
          }
        })
      }
    },
    reMathInfo(e, index) {
      const that = this
      let i = Number(index)
      // console.log('e', e, 'index', index)
      this.$nextTick(() => {
        that.sub_totalList[i] = 0
        if (
          that.schemeInfo.shpSchemeKind &&
          that.schemeInfo.shpSchemeKind.length > 0 &&
          that.schemeInfo.shpSchemeKind[i]
        ) {
          that.schemeInfo.shpSchemeKind[i].sub_total = 0
          that.schemeInfo.shpSchemeKind[i].shpSchemeDetailed.map((v) => {
            if (e.check) {
              that.schemeInfo.shpSchemeKind[i].sub_total += v.Price * v.Quantity
              that.sub_totalList[i] += v.Price * v.Quantity
            }
            if (v.check) {
            }
            this.$forceUpdate()
            return v
          })
          console.log(
            'shpSchemeDetailed :>> ',
            that.schemeInfo.shpSchemeKind[i].shpSchemeDetailed
          )
        }
      })
    },
    checkLine(e, i, index) {
      const that = this
      this.$nextTick(() => {
        e.check = !e.check
        if (!e.check) {
          that.schemeInfo.shpSchemeKind[i].check = false
        }
        let isCheck = true
        this.schemeInfo.shpSchemeKind[i].shpSchemeDetailed.map((v) => {
          if (!v.check) {
            isCheck = false
          }
        })
        if (isCheck) {
          this.schemeInfo.shpSchemeKind[i].check = true
        }
        that.$forceUpdate()
        // console.log('isCheck :>> ', isCheck)

        // console.log('e', e, 'check', e.check, 'i', i, 'index', index)
        this.makeKindIdList()
      })
    },
    checkAll(e, i) {
      const that = this
      const index = Number(i)
      console.log('e', e, 'check', e.check, 'index', index)
      this.$nextTick(() => {
        if (e.check) {
          e.check = false
        } else {
          e.check = true
        }
        this.$forceUpdate()
        that.schemeInfo.shpSchemeKind[index].sub_total = 0
        that.sub_totalList[index] = 0
        that.schemeInfo.shpSchemeKind[index].shpSchemeDetailed.map((v) => {
          if (e.check) {
            v.check = true
            that.schemeInfo.shpSchemeKind[index].sub_total +=
              v.Price * v.Quantity
            that.sub_totalList[index] += v.Price * v.Quantity
          } else {
            v.check = false
            that.sub_totalList[index] = 0
          }

          this.$forceUpdate()

          return v
        })
        this.makeKindIdList()
      })
      console.log(
        'schemeInfo :>> ',
        that.schemeInfo.shpSchemeKind[index].shpSchemeDetailed
      )
      // this.reMathInfo(obj)
    },
    onChange() {},
    getVideoList(e) {
      console.log('视频 :>> ', e.fileList)

      if (e.fileList.length > 0) {
        this.Video = e.fileList[0].response.data.fileName
      }
      console.log('this.Video :>> ', this.Video)
    },
    CreatePDF() {
      this.ModalTitle = 'Export'
      this.pdfModalVisable = true
      this.fileUrl = ''
      this.isTimeOut = false
      this.isToDo = false
    },
    toCreatePdf() {
      this.isToDo = true
      this.$showLoading()
      const that = this
      const a = {
        method: 'ExportToExcel',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {
          SchemeId: this.SchemeId,
          IsShowDetails: this.isDetail ? 1 : 0, //
          KindIdList: this.KindIdList,
        },
      }
      this.$post(a)
        .then((result) => {
          console.log('result :>> ', result)
          this.fileUrl = result.data.pdf
          if (result.data.pdf) {
            this.$message.success(
              'The PDF was generated successfully and will be downloaded to your browser later!'
            )
            this.pdfModalVisable = false
            this.$hideLoading()
            setTimeout(() => {
              // window.open(this.fileUrl)
              this.$pk.downLoadFile(this.fileUrl)
            })
          }

          this.isDetail = false
        })
        .catch((err) => {
          console.log('err :>> ', err)
          setTimeout(() => {
            this.isTimeOut = true
            this.$hideLoading()
            this.$message.error(
              'PDF generation failed, please contact administrator!'
            )
          }, 10000)
        })
    },
    cancelCreatePdf(e) {
      console.log('e :>> ', e)
      if (this.isToDo) {
        this.$nextTick(() => {
          if (this.fileUrl) {
            this.pdfModalVisable = false
          }
          if (!this.fileUrl && !this.isTimeOut) {
            this.pdfModalVisable = true
          }
          if (!this.fileUrl && this.isTimeOut) {
            this.pdfModalVisable = false
          }
        })
      } else {
        this.pdfModalVisable = false
      }
    },
    getImgFile(e) {
      console.log('父组件获取的图片 :>> ', e)
      let fileList = e.fileList
      this.Images = []
      fileList.map((item) => {
        this.Images.push(item.response.data.fileName)
      })
    },
    openAddCommentsModal() {
      this.ModalTitle = 'Add Comments'
      // 清空弹框参数
      this.Comments = ''
      this.Satisfaction = 1
      this.Video = ''
      this.$nextTick(() => {
        this.Images = []
      })
      this.modalVisiable = true
    },
    handleOk() {
      if (!this.Comments) {
        this.$message.warn('Please enter the Comments')
        return
      }
      this.addComment()
      this.modalVisiable = false
    },
    addComment() {
      const a = {
        method: 'ShpSchemeReply_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 1,
        limit: 20,
        language: window.language || 1,
        fieldList: '',
        datas: {
          SchemeId: this.SchemeId,
          UserId: this.UserInfo.NTID,
          Comments: this.Comments,
          Satisfaction: this.Satisfaction,
          Images: this.Images,
          Video: this.Video,
        },
      }
      this.$post(a).then((result) => {
        console.log('评论 :>> ', result)
        // this.userReviewsInfo = result.data
        if (result.code === 0) {
          this.$message.success('Add Success!')
          this.getCommentList()
        }
      })
    },
    changePage(current, pageSize) {
      this.commentPage = current
      this.commentPageSize = pageSize
      this.getCommentList()
    },
    getCommentList() {
      const a = {
        method: 'ShpSchemeReply_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.commentPage > 1 ? this.commentPage : 1,
        limit: this.commentPageSize,

        language: window.language || 1,
        fieldList: '',
        datas: {
          SchemeId: this.SchemeId,
          QueType: this.QueType, //只查询有图片的， "QueType":"Video" 只查询有视频的。不填是查所有。
        },
      }
      this.$post(a).then((result) => {
        console.log('评论 :>> ', result.data)
        this.userReviewsInfo = result.data ? result.data : {}
        this.commentCount = result.count
        if (
          this.userReviewsInfo.shpSchemeReplyInfo &&
          this.userReviewsInfo.shpSchemeReplyInfo.length > 0
        ) {
          this.userReviewsInfo.shpSchemeReplyInfo.map((item) => {
            item.selectUrl = ''
            item.CreateTime = item.CreateTime
              ? item.CreateTime.replace('T', ' ').slice(0, 22)
              : ''
            if (item.Images) {
              try {
                let img = eval('(' + item.Images + ')')
                if (Array.isArray(img)) {
                  item.Images = img
                } else {
                  item.Images = []
                }
              } catch (error) {
                console.log('error :>> ', error)
                item.Images = []
              }
            } else {
              item.Images = []
            }
            console.log('item :>> ', item.Images)
            console.log(
              ' this.userReviewsInfo.shpSchemeReplyInfo :>> ',
              this.userReviewsInfo.shpSchemeReplyInfo
            )
            return item
          })
        } else {
          this.commentCount = 0
          this.userReviewsInfo.shpSchemeReplyInfo = []
        }
      })
    },
    errorImg(event) {
      this.$pk.errorImg(event)
    },
    getSchemeId(e) {
      this.theSchemeId = e
      this.getSchemeDetail()
    },
    giveLike() {
      const a = {
        method: 'ShpSchemePraise_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 1,
        limit: 0,
        language: window.language || 1,
        datas: {
          SchemeId: this.theSchemeId,
        },
      }
      this.$post(a).then((result) => {
        console.log('result :>> ', result)
        this.getSchemeDetail()
      })
    },
    mock() {},

    toRecommend() {},
    tabClick(index) {
      this.activeIndex = index
    },
    RecommendSorting({ key }) {
      // console.log(`Click on item ${key}`)
    },
    handleScrollx() {
      let pageYOffset = Number(window.pageYOffset)
      // console.log('距离顶部高度', window)
      // console.log('滚动高度', pageYOffset)

      this.$nextTick(() => {
        if (pageYOffset >= 1190) {
          this.fixTop = true
        } else {
          this.fixTop = false
        }
      })
    },
    upTit() {
      this.trackULTop = this.trackULTop + 564
      if (this.trackULTop > 0) {
        this.trackULTop = -(this.schemeInfo.shpSchemeRecommend.length * 188)
      }
    },
    downTit() {
      this.trackULTop = this.trackULTop - 564
      if (
        this.trackULTop < -(this.schemeInfo.shpSchemeRecommend.length * 188)
      ) {
        this.trackULTop = 0
      }
    },
    shopImgPreview(e, v, i, index, List, arr) {
      this.$nextTick(() => {
        this.$set(
          this.userReviewsInfo.shpSchemeReplyInfo[index],
          'selectUrl',
          v
        )
        this.$set(
          this.userReviewsInfo.shpSchemeReplyInfo[index],
          'activeIndex',
          i
        )
        this.$set(
          this.userReviewsInfo.shpSchemeReplyInfo[index],
          'isShowImg',
          true
        )
        console.log('arr :>> ', arr)
        console.log(e, v, i, List)
        this.userReviewsInfo.shpSchemeReplyInfo[index].Images.map(
          (element, j) => {
            if (j === i) {
              let src = element
              element = {}
              element.activeIndex = i
              element.isShowImg = true
              console.log('element :>> ', element)
              return element
            }
          }
        )
      })
      console.log(
        'this.userReviewsInfo.shpSchemeReplyInfo[index] :>> ',
        this.userReviewsInfo.shpSchemeReplyInfo[index]
      )
    },
    geHistory() {
      const a = {
        method: 'Platform_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 1,
        limit: 4,
        language: 1,
        fieldList: '',
        datas: {
          IsMyBrowserHistory: '1',
        },
      }
      this.$post(a).then((result) => {
        this.browsingHistory = result.data
        this.browsingHistory.map((item) => {
          item.SchemeImage = item.SchemeImage
            ? eval('(' + item.SchemeImage + ')')
            : []
          return item
        })
      })
    },
    changeReviews(num) {
      this.reviewsIndex = num
      if (num === 0) this.QueType = ''
      else if (num === 1) this.QueType = 'Pictured'
      else if (num === 2) this.QueType = 'Video'
      this.getCommentList()
    },
    toSchemePage(item) {
      // 本页面  无需跳页 loading即可
      this.$showLoading()
      console.log('item :>> ', item)
      this.theSchemeId = item.SchemeId
      this.getSchemeDetail()
    },
    // 方案的详细信息
    getSchemeDetail() {
      const that = this
      const a = {
        method: 'ShpSchemeInfo_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {
          SchemeId: this.theSchemeId,
        },
      }
      this.$post(a).then((result) => {
        this.schemeInfo = result.data
        this.$hideLoading()
        console.log('this.schemeInfo :>> ', this.schemeInfo)
        this.schemeInfo.CreateTime = this.schemeInfo.CreateTime
          ? this.schemeInfo.CreateTime.replace('T', ' ').substr(0, 10)
          : ''
        this.schemeInfo.DueDate = this.schemeInfo.DueDate
          ? this.schemeInfo.DueDate.replace('T', ' ').substr(0, 10)
          : ''
        this.Summary = this.schemeInfo.Summary ? this.schemeInfo.Summary : ''
        this.imageArr = this.schemeInfo.SchemeImage
          ? eval('(' + this.schemeInfo.SchemeImage + ')')
          : []

        this.DetailedInformation = this.schemeInfo.Introduction
          ? this.schemeInfo.Introduction.split('\\').join('')
          : ''
        this.schemeInfo.shpSchemeRecommend.map((item) => {
          item.SchemeImage = item.SchemeImage
            ? eval('(' + item.SchemeImage + ')')
            : []
          return item
        })
        this.schemeInfo.shpSchemeSME.map((item) => {
          item.SchemeImage = item.SchemeImage
            ? eval('(' + item.SchemeImage + ')')
            : []
          return item
        })
        this.$nextTick(() => {
          that.totalAmount = 0
          this.schemeInfo.shpSchemeKind.map((item, index) => {
            item.sub_total = 0
            item.check = true
            this.sub_totalList[index] = 0
            if (item.shpSchemeDetailed && item.shpSchemeDetailed.length > 0) {
              item.shpSchemeDetailed.map((v, i) => {
                that.sub_totalList[index] += v.Price * v.Quantity
                v.check = true
                return v
              })
            }
            that.totalAmount = that.sub_totalList.reduce((x, y) => {
              return Number(x) + Number(y)
            })
            return item
          })
          this.makeKindIdList()
        })
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('row', selectedRows, selectedRowKeys) //选中行的数据
      this.selectedRows = selectedRows
      this.sub_total = 0
      selectedRows.map((item) => {
        this.sub_total += item.Price * item.Quantity
      })
    },
    // table点击当前行
    rowClick(row) {
      // console.log(text, record)
    },
    onChangeQuantity(text, index) {
      const that = this
      let i = Number(index)
      console.log(text, 'text', index, 'index')
      this.$nextTick(() => {
        that.schemeInfo.shpSchemeKind[i].sub_total = 0
        that.sub_totalList[i] = 0
        console.log(that.schemeInfo.shpSchemeKind[i].shpSchemeDetailed)
        that.schemeInfo.shpSchemeKind[i].shpSchemeDetailed.map((v, j) => {
          if (v.check == true) {
            that.schemeInfo.shpSchemeKind[i].sub_total += v.Price * v.Quantity
            that.sub_totalList[i] += v.Price * v.Quantity
            this.$forceUpdate()
          }
        })
        console.log('v :>> ', that.sub_totalList[i])
        that.totalAmount = that.sub_totalList.reduce((x, y) => {
          return Number(x) + Number(y)
        })
      })

      // this.reMathInfo()
    },

    setRowClassName(row) {},
  },
}
</script>
<style lang="less" scoped>
@import url('css/Scheme.less');
</style>